<script setup lang="ts">

import XImageView from "@/components/MyComponent/XImageView.vue";
import {FileVo} from "@/api/common/file/types";
import {Ref} from "vue";
import {viewFileApi} from "@/api/common/file";

const list: Ref<FileVo[]> = ref([])

async function getList() {
  list.value = await viewFileApi('view')
}

onMounted(() => {
  getList()
})
const photoUrl = ref('')
</script>

<template>
  <x-card class="box">
    <div>
      <x-upload style="margin-bottom: 1em;" path="view" v-model="photoUrl" :size="9"/>
    </div>
    <div>
      <x-image-view class="photo" v-for="item in list" :url="item.shorUrl" :key="item.id"/>
    </div>
  </x-card>
</template>

<style scoped lang="scss">
.box {
  height: 100vh;
  overflow-y: auto;
}

.photo {
  margin-bottom: 0.2em;
}

@media (min-width: 48em) {
  .photo {
    margin-bottom: 0.2em;
  }
}


</style>